<template>
	<view class="home">
		<view><input class="uni-input" focus placeholder="输入关键字查找喜欢的新闻" /></view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<view class="swiper-item uni-bg-red">
					<image :src="api+item.advImg"></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-grid :column="5" :highlight="false" @change="change" :showBorder="false">
			<uni-grid-item v-for="(item, index) in serviceList" :index="index" :key="item.id">
				<view class="grid-item-box" style="background-color: #fff;">
					<image :src="item.imgUrl"></image>
					<text class="text">{{item.serviceName}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>

		<view class="fixedit" :style="{top:top}">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in categories" :key="index"
					:class="[cateCurrentIndex == index ? 'grace-tab-current' : '']" @click="tabChange(cate,index)">
					{{cate.name}}
				</view>
			</scroll-view>
		</view>

		<view class="grace-news-list" style="width:94%; padding:5px 3%;">
			<block v-for="item in artList" :key="item.id">
				<view class="grace-news-list-img-news">
					<view class="grace-news-list-title-main">{{item.title}}</view>
					<view class="grace-news-list-img-big">
						<image :src="api+item.cover"></image>
					</view>
				</view>
			</block>
		</view>

	</view>
</template>
<script>
	import {
		rotationList,
		serviceList,
		categoryList,
		pressList
	} from "../../api/homeService.js"
	import {
		api
	} from "../../api/index.js"
	export default {
		data: function() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [],
				api,
				serviceList: [],
				top: 0,
				pageNum: 1,
				pageSize: 10,
				categories: [],
				cateCurrentIndex: 0,
				artList: []
			}
		},
		methods: {
			async tabChange(item, index) {
				this.cateCurrentIndex = index;
				let type = item.cateid;
				let params = {};
				if (type) {
					params.type = type;
				}
				let res = await pressList(params)
				this.artList = res.data.rows;
			},
			change(evt) {
				//console.log(evt);
				let index = evt.detail.index; //找到下标
				let item = this.serviceList[index];
				console.log(item);
				let link = item.link;
				if (link) {
					uni.navigateTo({
						url: "/pages/" + link
					})
				} else {
					uni.switchTab({
						url: "/pages/allservice/allservice"
					})
				}
			}
		},
		async created() {
			let res = await rotationList({
				type: 2
			})
			this.bannerList = res.data.rows;

			let res2 = await serviceList({});
			let lastItem = {
				id: 0,
				imgUrl: "../../static/more.png",
				serviceName: "更多服务"
			}
			let rows = res2.data.rows;
			this.serviceList = rows.length > 10 ? res2.data.rows.splice(0, 9).map(item => {
				item.imgUrl = api + item.imgUrl
				return item;
			}).concat([lastItem]) : rows;
			// console.log(res2);

			let res3 = await categoryList({})
			console.log(res3);

			this.categories = [{
				cateid: 0,
				name: "全部"
			}].concat(res3.data.data.map(item => {

				item.cateid = item.id;

				return item;
			}))

			let res4 = await pressList({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			})
			this.artList = res4.data.rows;
		}
	}
</script>

<style scoped>
	.uni-input {
		height: 72rpx;
		border-radius: 36rpx;
		margin: 6px;
		padding: 0 20rpx;
		border: 1px solid #E1E1E1;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.uni-grid-item {
		width: 80px;
		height: 80px;
	}

	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* padding: 15px 0; */
		margin-top: 10px;
		min-width: 0;
	}

	.uni-grid-item {
		width: 80px;
		height: 80px
	}

	.grid-item-box image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.grid-item-box .text {
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
	}

	.fixedit {
		width: 100%;
		z-index: 99;
		left: 0;
		top: 0;
	}
</style>